<template>
  <div :style="{ width: '100%' }">
    <a-calendar class="fullcalendar" :fullscreen="false" v-model="value" @change="onPanelChange">
      <template  slot="dateFullCellRender" slot-scope="value1">
        <span  @dblclick="handleDbclick">
          <a-badge status="success" class="calendar-badge" v-if="isHasTodo[getDateFormat(value1,'YYYY-MM-DD')]" :text="getDateFormat(value1,'DD')" />
          <span class="calendar-text" v-else>{{getDateFormat(value1,'DD')}}</span>
        </span>
      </template>
    </a-calendar>
    <div class="work-content-box">
      <template v-for="(item,i) in data">
        <div v-if="item.type !== 6" class="work-item" :key="i">
          <span class="content-item">
            <a-badge class="ellipsis" status="success" v-if="item.status === '已完成'" :text="item.record" />
            <a-badge class="ellipsis" status="warning" v-else-if="item.status === '未完成' && !isTimeOut(item)" :text="item.record" />
            <a-badge class="ellipsis" status="error" v-else-if="item.status === '未完成' && isTimeOut(item)" :text="item.record" />
          </span>
          <span class="ellipsis">{{getDataType(item.dataType)}}</span>
          <span class="time-item">{{item.isOpen ==='1'?'公开':'不公开'}}</span>
        </div>
      </template>
    </div>
    <pending-work-modal
      ref="pendingWorkModal"
      :calendarValue="value"
      currentTab="all"
      @init="init"
    >
    </pending-work-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
import pendingWorkModal from '@/views/pendingWork/modal/pendingWorkModal'
export default {
  name: 'PendingWork',
  components: {
    pendingWorkModal
  },
  data() {
    return {
      data: [],
      url: {
        backlogList: '/backlog/queryBacklogList'
      },
      value: '',
      todoList: []
    }
  },
  computed: {
    isHasTodo() {
      const todoObj = {}
      this.todoList.forEach(item => {
        if (item.planTime) {
          if (item.type !== 6) {
            const key = moment(item.planTime).format('YYYY-MM-DD')
            todoObj[key] ? todoObj[key].push(item) : todoObj[key] = [item]
          }
        }
      })
      return todoObj
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    onPanelChange() {
      this.loadData()
    },
    loadData() { // 根据日期请求对应的日程
      const params = {
        userId: this.userInfo().username,
        time: moment(this.value).format('YYYY-MM-DD')
      }
      getAction(this.url.backlogList, params).then(res => {
        if (res.success) {
          this.data = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getMonthsData() {
      const yearAndMonth = moment(this.value).format('YYYY-MM')
      const params = {
        userId: this.userInfo().username,
        startTime: yearAndMonth + '-01',
        endTime: yearAndMonth + '-' + this.lastDay
      }
      getAction(this.url.backlogList, params).then(res => {
        if (res.success) {
          this.todoList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getTodoList(list) { // 把请求回的数据按日期转换为对象
      this.todoList = {}
      list.forEach(item => {
        if (item.planTime) {
          const key = moment(item.planTime).format('YYYY-MM-DD')
          this.todoList[key] ? this.todoList[key].push(item) : this.todoList[key] = [item]
        }
      })
    },
    getDateFormat(value, format) {
      return moment(value).format(format)
    },
    isTimeOut(data) { // 判断是否超时
      const curentDate = new Date(data.server_time)
      const planDate = new Date(data.planTime)
      return curentDate.getTime() > planDate.getTime()
    },
    handleDbclick() {
      this.$refs.pendingWorkModal.init()
      this.$refs.pendingWorkModal.editModalVisible = true
    },
    getDataType(t) {
      let text
      switch (t) {
        case 0:
          text = '客户关系维护'
          break
        case 1:
          text = '台账进度管理'
          break
        case 2:
          text = '客户节点信息'
          break
        case 3:
          text = '技术TR不满足项'
          break
        case 4:
          text = '客户关系图'
          break
        case 5:
          text = '自定义待办'
          break
        default:
      }
      return text
    },
    init() {
      this.getMonthsData()
      this.loadData()
    }
  },
  mounted() {
    this.getMonthsData()
    this.$nextTick(() => {
      this.loadData()
    })
  },
  created() {
    this.value = moment(new Date())
  }
}
</script>
<style >
  .fullcalendar .ant-fullcalendar-cell{
    text-align: center;
  }
  .calendar-badge,.calendar-text{
    cursor: pointer;
  }
  .fullcalendar .ant-badge-status-text{
    margin-left: 0px;
  }
  .calendar-badge .ant-badge-status-text,.calendar-badge span,.calendar-text{
    padding: 3px;
  }
  .ant-fullcalendar-selected-day .calendar-badge .ant-badge-status-text,.ant-fullcalendar-selected-day .calendar-text{
    color: #fff;
    background: #1890ff;
  }
</style>
<style>
  .ellipsis .ant-badge-status-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor:pointer;
    max-width: 100px;
    display: inline-block;
    vertical-align: bottom;
  }
</style>
<style scoped>
/* 内容列表 */
.work-content-box {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  padding: 0px 10px;
  max-height: 400px;
  overflow-y: auto;
}
.work-item {
  display: grid;
  grid-template-columns:4.5fr 2.5fr 2fr;
  height: 40px;
  line-height: 40px;
}

.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor:pointer;
}
.work-item i {
  color: #7682a8;
}
.work-item .time-item {
  margin-right: 20px;
  color: #7682a8;
  font-size: 14px;
}
.work-item .content-item {
  color: #424e5c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
